// // styles/element/index.scss
// /* 只需要重写你需要的即可 */
// @forward "element-plus/theme-chalk/src/common/var.scss" with (
//   $colors: (
//     "primary": (
//       "base": #004b90,
//     ),
//     "success": (
//       "base": #67c23a,
//     ),
//     "warning": (
//       "base": #e6a23c,
//     ),
//     "danger": (
//       "base": #f56c6c,
//     ),
//     "error": (
//       "base": #f56c6c,
//     ),
//     "info": (
//       "base": #909399,
//     ),
//   )
// );

// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:
// @use "element-plus/theme-chalk/src/index.scss" as *;

.el-button {
  height: 32px;
}

.el-button--default {
  background-color: transparent;
  color: #fff;
  border-color: transparent;
  &:hover,
  &:focus {
    background-color: transparent;
    color: #01c2ff;
    border-color: transparent;
  }
}
.el-button--primary {
  border-color: #59aff9;
  color: #fff;
  &:hover,
  &:focus {
    border-color: #59aff9;
    color: #01c2ff;
    background: linear-gradient(
      180deg,
      rgba(0, 135, 255, 0.25) 0%,
      rgba(0, 135, 255, 0.52) 100%
    );
  }
}

.el-textarea__inner {
  // color: #fff !important;
  // background: #1e1d1d;
}

.el-button--text {
  color: #fff;
}

.el-button--text:not(.is-disabled):hover,
.el-button--text:not(.is-disabled):focus {
  color: #01c2ff;
}

.el-loading-spinner {
  .path {
    stroke: #fff;
  }
  .el-loading-text {
    color: #fff;
  }
}
.el-loading-mask {
  // z-index: 0 !important;
  background-color: rgba(15, 20, 43, 0.6) !important;
  .el-loading-spinner {
    .path {
      stroke: #fff;
    }
  }
}

.el-radio {
  // color: #fff !important;
  margin-right: 10px;
  &__label {
    // color: #fff !important;
  }
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: #01c2ff;
  &::after {
    background-color: #01c2ff;
  }
}

.el-table {
  transition: all 0.3s;
  background-color: var(--log-table-background);
  color: var(--title-color);
  --el-table-border-color: rgba(182, 220, 255, 0.15) !important;
  thead {
    tr,
    .tableheader {
      background-color: rgba(35, 132, 221, 0.3);
      th.el-table__cell {
        background-color: var(--el-table-cell);
        color: var(--title-color);
      }
    }
  }

  .el-table__row {
    background-color: transparent;
    .cell {
      color: var(--title-color);
    }
  }
  .el-scrollbar__wrap {
    background-color: var(--log-table-background);
  }
  .el-table__body {
    tr:hover > td.el-table__cell {
      background-color: var(--el-table__cell);
    }
    tr {
      td {
        background-color: var(--log-table-background) !important;
        .el-switch.is-checked .el-switch__core {
          border: none;
          background-color: rgb(35, 47, 73);
        }
        .el-icon {
          color: var(--title-color);
        }
        .el-button--primary {
          background-color: #01c2ff;
          span {
            color: var(--title-color);
          }
        }
      }
    }
    tr.current-row {
      td {
        border: 1px solid #0084fe;
        border-left: none;
        border-right: none;
        background-color: rgba(23, 61, 107) !important;
      }
    }
    tr.even-row {
      td {
        background-color: rgba(42, 72, 107) !important;
      }
    }
  }
  .el-loading-spinner {
    .path {
      stroke: var(--title-color);
    }
    .el-loading-text {
      color: var(--title-color);
    }
  }
  .el-table__empty-block {
    background-color: var(--log-table-background);
  }
  .el-loading-mask {
    background-color: rgba(15, 20, 43, 0.6);
  }
}

.el-dropdown__popper {
  border: none !important;
  opacity: 0.9 !important;

  .el-dropdown-menu {
    padding: 0;
    border: 3px solid rgba(0, 75, 144, 0.5);
    background: #004b90;
  }

  .el-dropdown__list {
    max-height: 300px;
    .el-dropdown-menu__item {
      color: #fff;
      margin: 5px 0;
      &:hover {
        background: #0084fe center !important;
      }
    }
    .active-tab {
      color: #fff;
      background: #0084fe center;
      background-size: 100% auto;
    }
  }

  .el-popper__arrow::before {
    border: 3px solid rgba(0, 75, 144, 0.5) !important;
    background: #004b90 !important;
  }
}

.el-select__popper {
  border: none !important;
  opacity: 0.9 !important;

  .el-select-dropdown {
    padding: 0;
    border: 3px solid rgba(0, 75, 144, 0.5) !important;
    background: #004b90 !important;
    .el-checkbox {
      &__label {
        color: #fff;
      }
      &__inner {
        border: 1px solid #0084fe;
        background-color: rgba(0, 0, 0, 0.25);
      }
    }
    .el-tree {
      color: #fff;
      max-height: 150px;
      overflow: auto;
      --el-tree-node-hover-bg-color: rgba(0, 0, 0, 0.25);
      background-color: transparent !important;
    }
  }

  .el-select-dropdown__list {
    .el-select-dropdown__item {
      color: #fff;
      margin: 5px 0;
      background-color: transparent;

      &:hover,
      .hover {
        color: #fff;
        background: #0084fe center;
      }
    }
  }

  .el-popper__arrow::before {
    border: 3px solid rgba(0, 75, 144, 0.5) !important;
    background: #004b90 !important;
  }
}

.el-pagination.is-background {
  .btn-prev,
  .btn-next {
    color: #fff !important;
    background-color: #004b90 !important;
    border: 1px solid #0084fe;
  }
  .el-pager {
    > li {
      color: #fff;
      border: 1px solid #0084fe;
      background-color: #004b90 !important;
    }
    .is-active {
      border: 1px solid #00feef;
      background-color: #007972 !important;
    }
  }
}

.el-message-box {
  --el-messagebox-title-color: #fff;
  --el-messagebox-content-color: #fff;
  border: 1px solid #0084fe;
  background-color: rgba(5, 69, 130);
  &__btns {
    .el-button {
      color: #fff;
      background-color: var(--el-color-primary);
    }
  }
}

.el-popper {
  background: #004b90 !important;
  color: #fff !important;
  border: none !important;
  .el-input {
    --el-input-text-color: var(--card-title);
    --el-input-border-color: transparent;
    --el-input-bg-color: rgba(35, 74, 124);
    --el-input-hover-border-color: #0084fe;
    .el-input__wrapper {
      background-color: rgba(35, 74, 124);
      border: transparent;
      border-left: 2px solid #0084fe;
      border-right: 2px solid #0084fe;
    }
  }
  .el-input__inner {
    color: #fff;
  }
  &__arrow::before {
    border: none !important;
    background: #004b90 !important;
  }
}

.el-message {
  background-color: transparent;
  &--success {
    border: 1px solid #54dd13 !important;
    background: rgba(45, 89, 91) !important;
  }
  &--error {
    border: 1px solid #fe0005 !important;
    background: rgba(61, 48, 78) !important;
  }
  &--warning {
    border: 1px solid #ff9900 !important;
    background: #653906 !important;
  }
  &--info {
    border: 1px solid #b6dcff !important;
    background: #566674 !important;
  }
  &__content {
    font-size: 20px;
    color: #fff !important;
  }
  &__icon {
    svg {
      display: none;
    }
  }
  &-icon--success {
    background: url("@/assets/images/message/complete.png");
    background-size: 100% auto;
  }
  &-icon--error {
    background: url("@/assets/images/message/close.png");
    background-size: 100% auto;
  }
  &-icon--warning {
    background: url("@/assets/images/message/warn.png");
    background-size: 100% auto;
  }
  &-icon--info {
    background: url("@/assets/images/message/info.png");
    background-size: 100% auto;
  }
}

.el-time-spinner__item {
  color: #fff !important;
}
.el-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
  color: #4e7cc2 !important;
}
.el-time-panel__btn.confirm {
  color: #fff !important;
}
.el-time-panel__btn {
  color: #dce5f8 !important;
}

.el-picker-panel {
  .el-date-range-picker__time-header {
    .el-input.is-disabled .el-input__wrapper {
      background-color: transparent !important;
    }
  }
  .el-time-panel {
    background-color: #004b90 !important;
  }
  .el-date-table td.today .el-date-table-cell__text {
    color: #fff;
  }
  &__body {
    color: #fff;
    background-color: #004b90;
    --el-datepicker-active-color: #0084fe;
    --el-datepicker-off-text-color: #cccccc95;
    --el-datepicker-header-text-color: #fff;
    --el-datepicker-icon-color: #fff;
    --el-datepicker-hover-text-color: #ccc;
    --el-datepicker-inrange-bg-color: rgb(19, 39, 66);
    --el-datepicker-inrange-hover-bg-color: rgb(35, 74, 124);
    --el-datepicker-inner-border-color: transparent;
  }
  &__footer {
    background-color: #004b90 !important;
    .el-button.is-text {
      color: #fff;
    }
    .el-button.is-text:not(.is-disabled):hover,
    .el-button.is-text:not(.is-disabled):focus {
      background-color: var(--el-color-primary);
      border: 1px solid #fff;
    }
    .el-button.is-disabled,
    .el-button.is-disabled:hover,
    .el-button.is-disabled:focus {
      color: #fff;
      background-color: #80a5c8;
    }
  }
}

.el-date-table td.disabled .el-date-table-cell {
  background-color: rgb(35, 74, 124) !important;
}

.el-menu--horizontal.el-menu {
  border-bottom: none;
  background-color: transparent;
  height: 7vh;
}

.el-menu--horizontal {

  .el-menu-item,
  .el-sub-menu__title {
    font-size: 20px;
  }
}

.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: none;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: transparent;
}

// .el-menu--horizontal>.el-sub-menu .el-sub-menu__title:hover{
//   background-color: transparent;
// }
.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
  border-bottom: none;
}
